<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> -->
    <meta name="viewport" content="width=750, target-densitydpi=device-dpi, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title></title>
    <!--<base href="https://weixin.zegelo.com/Scripts/mp/wine/" />-->
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <script type="text/javascript">
        //原理是在微信易信执行Ready之前，先注册事件，所以放在所有请求的最前面
        document.addEventListener("WeixinJSBridgeReady", function () {
            music();
            var wxMsg = document.getElementById("wxMsg");
            var talkMsg = document.getElementById("talkMsg");
            var btnMusic = document.getElementById("btnMusic");
            wxMsg.load()
            talkMsg.load()
            btnMusic.load()
        }, false);
        document.addEventListener('YixinJSBridgeReady', function () {
            music();
            var wxMsg = document.getElementById("wxMsg");
            var talkMsg = document.getElementById("talkMsg");
            var btnMusic = document.getElementById("btnMusic");
            wxMsg.load()
            talkMsg.load()
            btnMusic.load()
        }, false);
    </script>
</head>

<body>
    <div class="loadDom">
        <div class="loadBox">
            <div class="loadText">
                加载中
            </div>
            <div class="load">
                <div class="loadCur"></div>
            </div>
        </div>
    </div>
    <audio preload="auto" style="width:0;height:0" id="audio">
        <source src="sound/bg01.mp3" type="audio/mpeg" />
    </audio>
    <audio preload="auto" style="width:0;height:0" id="wxMsg">
        <source src="sound/wxMsg.mp3" type="audio/mpeg" />
    </audio>
    <audio preload="auto" style="width:0;height:0" id="talkMsg">
        <source src="sound/talkMusic.mp3" type="audio/mpeg" />
    </audio>
    <audio preload="auto" style="width:0;height:0" id="btnMusic">
        <source src="sound/btn.mp3" type="audio/mpeg" />
    </audio>
    <div class="wrap" id="wrap">
        <div class="container">
            <div class="bg">

                <div class="dinglan">
                    <img src="./img/topBar.png" alt="" />
                    <img src="./img/lock.png" alt="" class="lock" />
                </div>
                <div class="topMsg">
                    <p class="time">1:21</p>
                    <p class="date">3月5日 星期四</p>
                    <p class="nongli">庚子年二月十二</p>
                </div>
                <div class="msgBox">
                    <img src="./img/msg.png" id="one" alt="" class="msg animated fadeInDown" />
                    <img src="./img/msg.png" id="two" alt="" class="msg animated fadeInDown" />
                    <img src="./img/msg.png" id="three" alt="" class="msg animated fadeInDown" />
                </div>
                <div class="tools">
                    <img class="flashlight" src="./img/flash.png" alt="" />
                    <img class="camera" src="./img/camera.png" alt="" />
                </div>
                <div class="chat">
                    <!-- 第一个微信消息列表 -->
                    <div class="groupList animated fadeInRight">
                        <img src="./img/wxListTop.png" alt="" />
                        <img src="./img/wxList01.png" alt="" />
                        <img src="./img/wxListBo.png" alt="" class="groupInput" />
                    </div>
                    <div class="classGroup">
                        <img class="groupTop animated fadeInRight" src="./img/GroupTop.png" alt="" />
                        <img class="groupBo animated fadeInRight" src="./img/GroupBo.png" alt="" />
                        <p class="classmates animated fadeInRight">同学聚会群(23)</p>
                        <img class="classBg animated fadeInRight" src="./img/classBg.jpg" alt="" />
                        <img class="classTalk01 animated fadeIn" src="./img/classTalk01.png" alt="" />
                        <img class="classTalk02 animated fadeIn" src="./img/classTalk02.png" alt="" />
                        <img class="classTalk03 animated fadeIn" src="./img/classTalk03.png" alt="" />
                        <img class="classTalk04 animated fadeIn" src="./img/classTalk04.png" alt="" />
                    </div>
                    <!-- 第二个微信消息列表 -->
                    <!-- <div class="groupList02 animated fadeInLeft">
                        <img src="./img/wxListTop.png" alt="" />
                        <img src="./img/wxList02.png" alt="" />
                        <img src="./img/wxListBo.png" alt="" class="groupInput02" />
                    </div> -->
                    <div class="firmGroup02">
                        <img src="./img/GroupTop.png" alt="" class="firmGroupTop animated fadeInRight" />
                        <img src="./img/GroupBo.png" alt="" class="firmGroupBo animated fadeInRight" />
                        <p class="firmTitle animated fadeInRight">公司事业群(68)</p>
                        <img class="firmBg animated fadeInRight" src="./img/firmBg.png" alt="" />
                        <img class="firmTalk01 animated fadeIn" src="./img/firmTalk01.png" alt="" />
                        <img class="firmTalk02 animated fadeIn" src="./img/firmTalk02.png" alt="" />
                        <img class="firmTalk03 animated fadeIn" src="./img/firmTalk03.png" alt="" />
                        <img class="firmTalk04 animated fadeIn" src="./img/firmTalk04.png" alt="" />
                    </div>
                    <!-- 第三个微信消息列表 -->
                    <!-- <div class="groupList03 animated fadeInLeft">
                        <img src="./img/wxListTop.png" alt="" />
                        <img src="./img/wxList03.png" alt="" />
                        <img src="./img/wxListBo.png" alt="" class="groupInput03" />
                    </div> -->
                    <div class="homeGroup02">
                        <img src="./img/GroupTop.png" alt="" class="homeGroupTop animated fadeInRight" />
                        <img src="./img/GroupBo.png" alt="" class="homeGroupBo animated fadeInRight" />
                        <p class="homeTitle animated fadeInRight">一家亲(12)</p>
                        <img class="homeBg animated fadeInRight" src="./img/homeBg.jpg" alt="" />
                        <img class="homeTalk01 animated fadeIn" src="./img/homeTalk01.png" alt="" />
                        <img class="homeTalk02 animated fadeIn" src="./img/homeTalk02.png" alt="" />
                        <img class="homeTalk03 animated fadeIn" src="./img/homeTalk03.png" alt="" />
                        <img class="homeTalk04 animated fadeIn" src="./img/homeTalk04.png" alt="" />
                    </div>
                    <!-- <div class="groupList04 animated fadeInLeft">
                        <img src="./img/wxListTop.png" alt="" />
                        <img src="./img/wxList04.png" alt="" />
                        <img src="./img/wxListBo.png" alt="" class="groupInput04" />
                    </div> -->
                </div>
                <div class="applet animated fadeInDown">
                    <div class="appletItem animated fadeInDown">
                        <img src="./img/appletItem.png" alt="" />
                        <p class="firstP">春暖花开</p>
                        <p class="secP">第一约</p>
                    </div>
                </div>
                <div class="final animated fadeInDown">
                    <img src="./img/paperFlower.png" alt="" class="flower" />
                    <div class="paper">
                        <div class="textList">
                            <div class="rowup">
                                <img src="./img/paperText.png" alt="" width="100%" />
                            </div>
                        </div>
                    </div>
                    <div class="mailTop animated fadeInUpBig">
                        <img src="./img/envelopeTop.png" alt="" class="mailTop" />
                    </div>
                    <div class="mailBo animated fadeInUpBig">
                        <img src="./img/envelopeBo.png" alt="" class="mailBo" />
                    </div>
                    <div class="mailClose">
                        <img src="./img/envelopeClose.png" alt="" />
                    </div>
                    <div class="firstMeet">
                        <img src="./img/firstBtn.png" alt="" id="showIndex" />
                    </div>
                </div>

                <!-- 定制页 -->
                <div class="custom">
                    <div class="custom__rules">活动规则≡</div>
                    <div class="custom__title">春暖花开第一约</div>
                    <div class="custom__box">
                        <img src="./img/left_arrow.png" alt="" class="prev" />
                        <div class="custom__container">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="./img/scene1.png" alt="" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="./img/scene2.png" alt="" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="./img/scene3.png" alt="" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="./img/scene4.png" alt="" />
                                    </div>
                                </div>
                            </div>
                            <div class="custom__choose">
                                <div class="custom__say">
                                    <div class="choose__txt">我想说：</div>
                                    <div class="select" id="say">
                                        <div class="select__value" id="say__val">隔屏相望多日，何时把酒一见</div>
                                        <div class="select__icon">
                                            <img src="./img/bottom_arrow.png" alt="" />
                                        </div>
                                        <ul id="say__ul" class="select__say">
                                            <li>隔屏相望多日，何时把酒一见</li>
                                            <li>错过的酒，现在就补上</li>
                                            <li>诚意满满的这顿酒，一定要来哦</li>
                                            <li>等了这么久，还需要什么理由，喝酒</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="custom__time">
                                    <div class="choose__txt">何时约：</div>
                                    <div class="select" id="time">
                                        <div class="select__value" id="time__val">春暖花开时</div>
                                        <div class="select__icon">
                                            <img src="./img/bottom_arrow.png" alt="" />
                                        </div>
                                        <ul id="time__ul" class="select__time">
                                            <li>春暖花开时</li>
                                            <li>下周末</li>
                                            <li>这个月内</li>
                                            <li>两周内</li>
                                            <li>下个月一定</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <img src="./img/right_arrow.png" alt="" class="next" />
                    </div>
                    <div class="custom__next">
                        <div class="custom__btn">点击继续</div>
                        <img src="./img/right_arrow.png" alt="" />
                    </div>
                </div>

                <!-- 活动规则 -->
                <div class="rules">
                    <div class="rules__title">
                        <div>活动规则</div>
                        <div class="rules-close">
                            <img src="./img/close.png" alt="" />
                        </div>
                    </div>
                    <div class="rules__content">
                        <img src="./img/active.png" alt="" />
                    </div>
                    <div class="rules__ownership">*活动最终解释权由苏酒集团贸易股份有限公司所有</div>
                </div>

                <!-- 个人邀请页 -->
                <div class="invite">
                    <div class="invite__alert">
                        <div class="alart__img">
                            <img src="./img/alartImg.png" alt="">
                            <div class="alart__imgClose">
                                <img src="./img/close.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="invite__bg">
                        <img src="./img/sceneCommon.png" alt="" id="bg__img">
                        <div class="invite__nickName">阿明</div>
                        <div class="invite__avatar">
                            <img src="./img/avatar.png" alt="" />
                        </div>
                        <div class="invite__txt">
                            <div class="invite__time">疫情结束后</div>
                            <div class="invite__say">
                                <p class="invite__sayp1">错过的酒</p>
                                <p class="invite__sayp2">终于可以补上了</p>
                                <p class="invite__sayp3"></p>
                            </div>
                        </div>
                        <div class="invite__notice"></div>
                        <!-- 第一个场景动画 -->
                        <div class="scenceAnimateDom scenceAnimateDom1">
                            <div class="scene1_1">
                                <img src="./img/scene1_1.png" alt="" />
                            </div>
                            <div class="scene1_2">
                                <img src="./img/scene1_2.png" alt="" />
                            </div>
                        </div>
                        <!-- 第二个场景动画 -->
                        <div class="scenceAnimateDom scenceAnimateDom2">
                            <div class="scene2_1"><img src="./img/scene2_1.png" alt="" /></div>
                            <div class="scene2_2"><img src="./img/scene2_2.png" alt="" /></div>
                            <div class="sy1"><img src="./img/sy1.png" alt="" /></div>
                            <div class="sy2"><img src="./img/sy2.png" alt="" /></div>
                            <div class="sy3"><img src="./img/sy1.png" alt="" /></div>
                            <div class="sy4"><img src="./img/sy2.png" alt="" /></div>
                        </div>
                        <!-- 第三个场景动画 -->
                        <div class="scenceAnimateDom scenceAnimateDom3">
                            <div class="scene3_1"><img src="./img/scene3_1.png" alt="" /></div>
                            <div class="scene3_2"><img src="./img/scene3_2.png" alt="" /></div>
                            <div class="th1"><img src="./img/th1.png" alt="" /></div>
                            <div class="th2"><img src="./img/th2.png" alt="" /></div>
                            <div class="th3"><img src="./img/th3.png" alt="" /></div>
                            <div class="th4"><img src="./img/th4.png" alt="" /></div>
                        </div>
                        <!-- 第四个场景动画 -->
                        <div class="scenceAnimateDom scenceAnimateDom4">
                            <div class="scene4_1"><img src="./img/scene4_1.png" alt="" /></div>
                            <div class="fish1"><img src="./img/fish1.png" alt="" /></div>
                            <div class="fish2"><img src="./img/fish2.png" alt="" /></div>
                            <div class="fish3"><img src="./img/fish3.png" alt="" /></div>
                        </div>
                    </div>
                    <div class="invite__bottom">
                        <div class="yyhy">应邀好友</div>
                        <div class="invite__swiper">
                            <img src="./img/larrow.png" alt="" class="prev1">
                            <div class="swiper-container1">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar3.png" alt="">
                                    </div>
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar.png" alt="">
                                    </div>
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar3.png" alt="">
                                    </div>
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar.png" alt="">
                                    </div>
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar3.png" alt="">
                                    </div>
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar.png" alt="">
                                    </div>
                                    <div class="swiper-slide avatarImg">
                                        <img src="./img/avatar3.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <img src="./img/rarrow.png" alt="" class="next1">
                        </div>
                        <div class="invite__item">
                            <div class="invite__btn"></div>
                            <div class="invite__btn02"></div>
                        </div>
                        <div class="invite__ownership">*中奖信息后续将通过电话人工告知</div>
                    </div>
                </div>

                <!-- 分享约好友遮罩 -->
                <div class="mask_share"></div>

                <!-- 中奖公告 -->
                <div class="notice">
                    <div class="notice__title">
                        <div>中奖公告</div>
                        <div class="notice-close">
                            <img src="./img/close.png" alt="" />
                        </div>
                    </div>
                    <div class="notice__content">
                        <div class="notice__tit">中奖名单</div>
                        <div class="notice__box">
                            <div class="notice__hd">
                                <div>时间</div>
                                <div>头像</div>
                                <div>昵称</div>
                                <div>奖品</div>
                            </div>
                            <div class="notice__list">
                                <ul>
                                    <li>
                                        <div class="giftTime">2020.3.11</div>
                                        <div class="giftImg">
                                            <img src="./img/avatar.png" alt="" />
                                        </div>
                                        <div class="giftNick">橘子可爱</div>
                                        <div class="giftList">梦之蓝M6+(一瓶)</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="notice__ownership">*活动最终解释权由苏酒集团贸易股份有限公司所有</div>
                </div>

            </div>
        </div>
    </div>
	<!-- 我的邀约 -->
	<div class="InviteDom">
		<div class="InviteBg"><img src="img/bg1.jpg" alt="" /></div>
		<div class="content">
			<div class="t1"><img src="img/t1.png" alt="" /></div>
			<div class="btn_prev"><img src="img/arrow1.png" alt="" /></div>
			<div class="inviteBox">
				<div class="swiper-container2">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide">
				            <div class="inviteItem">
								<img src="img/box1.png" alt="" />
								<div class="ydTime">下个月内</div>
								<div class="yyNum">20人</div>
								<div class="btn_detail"><img src="img/btn_detail.png" alt="" /></div>
							</div>
				        </div>
				        <div class="swiper-slide">
				            <div class="inviteItem">
				        		<img src="img/box1.png" alt="" />
				        		<div class="ydTime">下个月内</div>
				        		<div class="yyNum">20人</div>
				        		<div class="btn_detail"><img src="img/btn_detail.png" alt="" /></div>
				        	</div>
				        </div>
						<div class="swiper-slide">
						    <div class="inviteItem">
								<img src="img/box1.png" alt="" />
								<div class="ydTime">下个月内</div>
								<div class="yyNum">20人</div>
								<div class="btn_detail"><img src="img/btn_detail.png" alt="" /></div>
							</div>
						</div>
						<div class="swiper-slide">
						    <div class="inviteItem">
								<img src="img/box1.png" alt="" />
								<div class="ydTime">下个月内</div>
								<div class="yyNum">20人</div>
								<div class="btn_detail"><img src="img/btn_detail.png" alt="" /></div>
							</div>
						</div>
				    </div>
				</div>
			</div>
			<div class="btn_next"><img src="img/arrow2.png" alt="" /></div>
			<div class="btn_againInvite"><img src="img/btn_againInvite.png" alt="" /></div>
		</div>
	</div>
    <script src="./js/defer.js" defer></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/preloadjs.js"></script>
    <script src="js/index.js"></script>
    <script>
        var username = "@ViewBag.nickName";
    </script>
    <script src='https://res.wx.qq.com/open/js/jweixin-1.3.2.js'></script>
    <script src="https://weixin.zegelo.com/Themes/js/WeiXin.js"></script>
    <script src="https://weixin.zegelo.com/Scripts/mp/wine/game.index.js"></script>
    <script src="js/swiper.min.js"></script>
    <script type="text/javascript">
        wx.ready(function () {
            music();
        });
    </script>

    <!--<script src="https://weixin.zegelo.com/Themes/js/plugins/vconsole/vconsole.min.js"></script>
    <script>
        // 初始化
        var vConsole = new VConsole();
        console.log('Hello WebWang');
        console.log('@HttpContext.Current.Request.Url');
    </script>-->
</body>

</html>